<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>

	<div wicket:id="examples" class="section">
	   <h2 id="behaviors">WiQuery Effects</h2>
	   <p>This page shows how jQuery effects are bound with WiQuery.</p>

	   <div class="section">
	       <h3>Example 1: Animate an element </h3>
	       <p>This example shows how to display/hide paragraph with fade and animation.</p>

            <div class="runit">
	               <span wicket:id="example1">Example 1 !</span>
	               <span wicket:id="example1P">Text to animate</span>
	       </div>

         <div class="source">
	         <p class="htmlCode">
<code class="html">
&lt;span wicket:id="example1"&gt;Example 1 !&lt;/span&gt;
&lt;span wicket:id="example1P"&gt;Text to animate&lt;span&gt;
</code>

            </p>
	           <p class="javaCode">
<code class="java">
public MyWebPage(String id) {
        super(id);
      
        Label example1 = new Label("example1", "Click to run example 1");
        final MultiLineLabel example1P = new MultiLineLabel("example1P", "Text to animate");
        example1.add(new WiQueryEventBehavior(new Event(MouseEvent.CLICK) {
            /**
             * 
             */
            private static final long serialVersionUID = 1L;
            @Override
            public JsScope callback() {
                return JsScope.quickScope(new JsQuery(example1P).$().append(".toggle('slow')").render());
            }
        
        }));
        this.add(example1);
        
        t.add(example1P);
        }
</code>			
	           </p>
	       </div>
	   </div>
<p> See <a href='http://docs.jquery.com/Effects'>http://docs.jquery.com/Effects</a></p>
	    </div>

</wicket:panel>
</html>
